<template>
  <div style="padding: 20px">
    <tableHeader />
    <!-- 工单详情模块 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>工单详情</span>
        </div>
      </template>
      <el-row :gutter="0" style="display: flex">
        <el-col :span="24">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="设备编号">
              {{ order.single.deviceCode }}</el-descriptions-item
            >
            <el-descriptions-item label="设备名称">
              {{ order.single.deviceName }}</el-descriptions-item
            >
            <el-descriptions-item label="设备地址">
              {{ order.single.deviceAddress }}</el-descriptions-item
            >
            <el-descriptions-item label="网关编号">
              {{ order.single.gatewayCode }}</el-descriptions-item
            >
            <el-descriptions-item label="项目名称">
              {{ order.single.projectName }}</el-descriptions-item
            >
            <el-descriptions-item label="工单状态/点击确认">
              <el-tag
                @click="examine(order.single)"
                style="cursor: pointer"
                :type="
                  order.single.status === '0'
                    ? 'danger'
                    : order.single.status === '1'
                    ? 'warning'
                    : order.single.status === '2'
                    ? 'warning'
                    : order.single.status === '3'
                    ? 'success'
                    : order.single.status === '4'
                    ? 'info'
                    : 'success'
                "
                >{{
                  order.single.status === "0"
                    ? "待派工"
                    : order.single.status === "1"
                    ? "待执行"
                    : order.single.status === "2"
                    ? "服务中"
                    : order.single.status === "3"
                    ? "已完成"
                    : order.single.status === "4"
                    ? "已取消"
                    : "已考核"
                }}</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item label="企业/客户名称">
              {{ order.single.customerName }}</el-descriptions-item
            >
            <el-descriptions-item label="企业/客户电话">
              {{ state.companyPhone }}</el-descriptions-item
            >
            <el-descriptions-item label="服务开始时间">
              {{ order.single.startTime }}</el-descriptions-item
            >
            <el-descriptions-item label="服务完成时间">
              {{ order.single.endTime }}</el-descriptions-item
            >
            <el-descriptions-item label="维护人员/点击修改">
              <el-tag
                @click="changePerson(order.single)"
                style="cursor: pointer"
                >{{ order.single.employeeName }}</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item label="维护人员联系方式">
              {{ state.employeePhone }}</el-descriptions-item
            >
            <el-descriptions-item label="主修人">
              {{ order.single.chargePerson }}</el-descriptions-item
            >
            <el-descriptions-item label="申请服务时间">
              {{ order.single.createTime }}</el-descriptions-item
            >
            <el-descriptions-item label="故障时间">
              {{ order.single.downTime }}</el-descriptions-item
            >
            <el-descriptions-item label="故障描述">
              {{ order.single.description }}</el-descriptions-item
            >
            <el-descriptions-item label="故障图片">
              <el-image
                v-for="(item, index) in order.single.faults"
                :key="index"
                style="width: 30%; height: 30%"
                :src="item"
                fit="fill"
                :preview-src-list="[item]"
              />
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card picBox">
      <template #header>
        <div class="card-header">
          <span>服务图片</span>
        </div>
      </template>
      <el-row :gutter="20" style="display: flex">
        <el-col :span="12" style="align-items: stretch">
          <el-link
            type="primary"
            :underline="false"
            style="vertical-align: baseline"
            >门头照片:</el-link
          >
          <div class="imgBox">
            <el-image
              :src="order.single.picture"
              fit="fill"
              :preview-src-list="[order.single.picture]"
              style="width: 200px; height: 200px"
            /></div
        ></el-col>
        <el-col :span="24" style="margin-top: 20px">
          <el-link
            type="primary"
            :underline="false"
            style="vertical-align: baseline"
            >服务过程图片:</el-link
          >
          <div class="imgBox">
            <div
              v-for="(item, index) in order.single.processPhoto"
              :key="index"
              style="width: 200px; height: 200px"
            >
              <el-image :src="item" fit="fill" :preview-src-list="[item]" />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <popuoForm v-model="state.showForm" />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide, onMounted, computed } from "vue";
import tableHeader from "./tableHeader.vue";
import { useAccess } from "@/store/backend/DeviceM/access";
import { useRouter, useRoute } from "vue-router";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import { useNavTabs } from "@/store/navTabs";
import { useWorkOrder } from "@/store/backend/WorkOrder/order";
import { useBusiness } from "@/store/backend/BusinessM/info";
import popuoForm from "./popupForm.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { ElNotification, ElMessage, ElMessageBox } from "element-plus"; //处理导航信息

const router = useRouter();
const route = useRoute();
const access = useAccess();
const navTabs = useNavTabs();
const order = useWorkOrder();
const business = useBusiness();
const { proxy } = useCurrentInstance(); //mitt

interface anyObj {
  [key: string]: any;
}
const state: {
  deviceList: anyObj;
  companyPhone: string;
  employeePhone: string;
  showForm: boolean;
} = reactive({
  deviceList: [],
  companyPhone: "",
  employeePhone: "",
  showForm: false,
});

type DeviceItem = {
  avatar: string;
  equipid: number;
  morestatus: number;
  name: string;
  status: number;
};

//获取企业信息
const getBusinessInfo = () => {
  business.getItemInfo(order.single.customerName).then((res: any) => {
    state.companyPhone = res.rows[0].tel;
  });
};

//派工给维护人员
const changePerson = (item: any) => {
  console.log("派工给维护人员", item);
  proxy.eventBus.emit("editWorkOrder", item);
  state.showForm = true;
};

//工单完成确认
const examine = (item: any) => {
  if (item.status === "3") {
    ElMessageBox.confirm("是否确认完成工单", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        item.status = "5";
        order.changWorkOrder(item).then((res: any) => {
          if (res.data.code == 200 && res.data.msg !== "操作成功") {
            ElNotification({
              type: "info",
              message: "工单已被接单",
            });
          }
          //确认之后重新获取考核数据
          unExamineWorkOrders();
        });
      })
      .catch(() => {});
  } else {
    ElNotification({
      type: "error",
      message: "工单暂未完成",
    });
  }
};
//获取未审核(待派工)0或者未考核(已完成)3工单
const unExamineWorkOrders = () => {
  order
    .getSingleAndListOrderAuto({
      status: "0",
    })
    .then((res: any) => {
      console.log("待派工工单数据", res);
      order.topNewsNum = res.total;
      order.topNewsObj = res.rows;
      order
        .getSingleAndListOrderAuto({
          status: "3",
        })
        .then((res: any) => {
          console.log("已完工工单数据", res);
          if (res.rows.length > 0) {
            order.topNewsNum += res.total;
            order.topNewsObj.push(...res.rows);
          }
        });
    });
};

onMounted(() => {
  //获取企业信息
  getBusinessInfo();
  //获取维护人员信息
  if (order.single.employeeId && order.single.employeeId !== "0") {
  }
});
provide("access", access);
provide("order", order);
</script>
<style lang="scss" scoped>
.lg-mb-20 {
  margin-bottom: 20px;
}
// 物联网模块
.internet {
}
.box-card {
  margin-bottom: 20px;
}
.imgBox {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.picBox {
  height: 500px;
}
</style>
